<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

  <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.8.2/theme-chalk/index.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.8.2/index.js"></script>
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <avue-tree-table :option="option" :data="data" @current-row-change="handleCurrentRowChange"
      @row-dblclick="handleRowDBLClick" @row-click="handleRowClick">
      <template slot="icon" slot-scope="scope">
        <i :class="scope.row.icon" style="font-size:24px"></i>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button :size="scope.size" @click="tip(scope)">自定义菜单</el-button>
      </template>
    </avue-tree-table>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        data: [
          {
            id: 0,
            event: '事件1',
            timeLine: 50,
            icon: 'el-icon-time',
            comment: '无'
          },
          {
            id: 1,
            event: '事件1',
            icon: 'el-icon-bell',
            timeLine: 100,
            comment: '无',
            children: [
              {
                id: 2,
                event: '事件2',
                icon: 'el-icon-star-on',
                timeLine: 10,
                comment: '无'
              },
              {
                id: 3,
                event: '事件3',
                timeLine: 90,
                comment: '无',
                children: [
                  {
                    id: 4,
                    event: '事件4',
                    timeLine: 5,
                    comment: '无'
                  },
                  {
                    id: 5,
                    event: '事件5',
                    timeLine: 10,
                    comment: '无'
                  },
                  {
                    id: 6,
                    event: '事件6',
                    timeLine: 75,
                    comment: '无',
                    children: [
                      {
                        id: 7,
                        event: '事件7',
                        timeLine: 50,
                        comment: '无',
                        children: [
                          {
                            id: 71,
                            event: '事件71',
                            timeLine: 25,
                            comment: 'xx'
                          },
                          {
                            id: 72,
                            event: '事件72',
                            timeLine: 5,
                            comment: 'xx'
                          },
                          {
                            id: 73,
                            event: '事件73',
                            timeLine: 20,
                            comment: 'xx'
                          }
                        ]
                      },
                      {
                        id: 8,
                        event: '事件8',
                        timeLine: 25,
                        comment: '无'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ],
        option: {
          highlightCurrentRow: true,
          headerAlign: 'center',
          align: 'center',
          expandAll: false,
          expandLevel: 2,
          border: true,
          index: true,
          column: [
            {
              label: '事件',
              prop: 'event',
              align: 'left',
              width: 200
            },
            {
              label: 'ID',
              prop: 'id',
              dicData: [{
                label: '零',
                value: 0
              }, {
                label: '一',
                value: 1
              }, {
                label: '二',
                value: 2,
              }]
            },
            {
              label: '时间线',
              prop: 'timeLine',
              sortable: true
            },
            {
              label: '自定义图标',
              prop: 'icon',
              slot: true,
            },
            {
              label: '备注',
              prop: 'comment'
            }
          ],
        }
      }
    },
    methods: {
      handleCurrentRowChange(val) {
        this.$message.success('查看控制台')
        console.log('单选', val);
      },
      handleRowClick(row, event, column) {
        this.$message.success('查看控制台')
        console.log('单机', row);
      },
      handleRowDBLClick(row, event) {
        this.$message.success('查看控制台')
        console.log('双击', row);
      },
      tip(scope) {
        this.$message.success('查看控制台')
        console.log('行数据', scope);
      }
    }
  })
</script>

</html>